import React, { Component } from 'react'
import Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
Swiper.use([Navigation, Pagination])
export default class App extends Component {
    state = {
        list: [1, 2, 3, 4, 5, 6]
    }
    componentDidMount() {
        new Swiper('.swiper', {
            loop: true,
            modules: [Navigation, Pagination],
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
    }
    render() {
        return (
            <div>
                <div className="swiper" style={{ height: '200px', backgroundColor: 'red' }}>
                    <div className="swiper-wrapper">
                        {this.state.list.map(item => <div className='swiper-slide' key={item} >{item}</div>)}
                    </div>
                    <div className="swiper-pagination"></div>
                    <div className="swiper-button-prev"></div>
                    <div className="swiper-button-next"></div>
                    <div className="swiper-scrollbar"></div>
                </div>
            </div>
        )
    }
}
